<!-- 书架 -->
<template>
    <div class="bookshelf">
        <!-- 用户 -->
        <div class="user clearfix">
            <img :src="user.Avatar ? user.Avatar : $parent.headError" alt="" :onerror="$parent.headError" class="avatar left">
            <div class="info left">
                <div class="name">{{user.TrueName}}</div>
                <div class="class" v-if="user.classJson">{{user.classJson[0].name}}</div>
            </div>
        </div>
        <!-- 列表 -->
        <ul class="book-list clearfix">
            <li v-for="(item,index) in bookList" :key="index" class="left">
                <div class="book-box shadow1" @click="goDetail(item)">
                    <img :src="item.bookInfo.bookCover" alt="">
                    <span :class="['label',{'clock-in':item.myState==1},{'test-in':item.myState==5},{'clock-up':item.myState==2 || item.myState==6},{'new':item.myState==4}]" v-if="[1,2,4,5,6].includes(item.myState)">{{item.label}}</span>
                    <!--<div class="book-mask" v-if="item.myState==3"></div>-->
                </div>
                <div class="name" @click="goDetail(item)">{{item.bookInfo.bookName}}</div>
            </li>
            <!-- 添加按钮 -->
            <li class="left">
                <router-link :to="{path:'/library',query:{}}">
                    <div class="btn-add book-box shadow1">添加新书</div>
                </router-link>
            </li>
        </ul>

    <div class="mask" v-show="isGift"></div>
        <transition name='fade'>
            <div class="giftLayer" v-show="isGift">
                <router-link to='/buyhelp'>
                    <div class="howUseCard"></div>
                </router-link>
                <div class="closeGift" @click="isGift=false"></div>
            </div>
        </transition>
    </div>
</template>

<script>
import { alertMask } from '@/assets/js/base'
import { axGet } from '@/api/index'
export default {
    name: "bookshelf",
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            user:this.$parent.myInfo,  //用户信息
            bookList:[],   //书本列表
            isGift:false,
        }
    },
    watch:{
        
    },
    created(){
        this.$parent.guideShow = localStorage.getItem("hasGuide"+this.type)==1 ? false : true;
        
        this.$parent.menuShow=true; 
        this.$parent.menuChose=1;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.getMyBook();
            this.getIsHasGift();
        }
    },
    mounted(){
        
    },
    methods:{
        //去详情
        goDetail(item){
            if(item.bookInfo.grade==1){
                item.bookInfo.gradeName='一年级'
            }else if(item.bookInfo.grade==2){
                item.bookInfo.gradeName='二年级'
            }else if(item.bookInfo.grade==3){
                item.bookInfo.gradeName='三年级'
            }else if(item.bookInfo.grade==4){
                item.bookInfo.gradeName='四年级'
            }else if(item.bookInfo.grade==5){
                item.bookInfo.gradeName='五年级'
            }else if(item.bookInfo.grade==6){
                item.bookInfo.gradeName='六年级'
            }
            sessionStorage.setItem("thisBook",JSON.stringify(item.bookInfo))
            
            if(item.myState==5 && this.type==0){//学生考试中
                if(item.hasTest){
                    this.$router.push({path:'/challengeEnd',query: {bookid:item.bookInfo.bookId,hastest:1,from:'test'}}); 
                }else{
                    this.$router.push({path:'/challengeStart',query: {bookid:item.bookInfo.bookId}});
                }
            }else if(item.myState==5 && this.type==1){//教师考试中
                this.$router.push({path:'/testState',query: {bookid:item.bookInfo.bookId}});
            }else{
                this.$router.push({path:'/bookDetail',query: {bookid:item.bookInfo.bookId,history:item.myState}});
            }
            
        },
        //书架请求
        getMyBook(){
            axGet('GetMyHRBookList', {
                PageIndex: 1,
                PageSize:1000,
                userId:this.user.UserId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.bookList=res.Value.list
                    this.bookList.forEach((item,i)=>{
                        // if(i==0){
                        //     item.myState=6
                        // }
                        // if(i==1){
                        //     item.myState=5
                        // }
                        item.label=''
                        if(item.myState==1){
                            item.label='打卡中'
                        }else if(item.myState==2){
                            item.label='已打卡'
                        }else if(item.myState==4){
                            item.label='NEW'
                        }else if(item.myState==5){
                            item.label='考试中'
                        }else if(item.myState==6){
                            item.label='已考试'
                        }
                    })
                }
            })
        },
        //获取是否有赠送书券
        async getIsHasGift(){
            let res = await axGet('GiveVoucher', {userId:this.user.UserId,})
            console.log(res,"res")
            if(res.Value){
                this.isGift =true
            }
        },
        
    }
}
</script>
<style lang='scss' scoped>
.bookshelf{
    width: auto;
    height: 90%;
    overflow: scroll;
}
.giftLayer{
    position: fixed;
    width: 5.6rem;
    height: 5.9rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5.6rem;
    height: 5.9rem;
    background: url(~@/assets/img/main/gotCard.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2001;
}
.howUseCard{
    width: 3.52rem;
    height: 1rem;
    background: url(~@/assets/img/main/howUseCard.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 1.04rem;
    bottom: -.5rem;
}
.closeGift{
    width: .7rem;
    height: .7rem;
    background: url(~@/assets/img/icon/mask-close.png);
    background-size: 100% 100%;
    position: absolute;
    left: 2.45rem;
    bottom: -1.5rem;
}
</style>